<script setup>
import TabBarItem from "./components/TabBarItem.vue";
import TabBar from "./components/TabBar.vue"
import HomeView from "./views/HomeView.vue";
import CateView from "./views/CateView.vue";
import shopping from "./views/shopping.vue";
import me from "./views/me.vue";
import {ref,shallowRef} from 'vue'

const active = ref(0)
const views = [HomeView, CateView, shopping, me]


/* const handleChange = (index)=>{
  active.value = index
}
 */
</script>

<template >
  <!-- 内置组件，有一个is属性，用于指定渲染哪个组件 -->
  <!-- 一个内置组件，它主要用于优化组件的渲染性能，通过缓存组件状态来避免不必要的重复渲染 -->
  <keep-alive>  
    <component :is="views[active]"></component>
  </keep-alive>
  <TabBar v-model="active">
    <TabBarItem icon="jingdong"  >首页</TabBarItem>
    <TabBarItem icon="fenlei" >分类</TabBarItem>
    <TabBarItem icon="gouwuchekong" >购物车</TabBarItem>
    <TabBarItem icon="wode" >我的</TabBarItem>
  </TabBar>
</template>

<style scoped>

</style>
